{include file="elements/profile.header.tpl"}
    
<h1 style="padding-left: 15px">Изменение фото</h1>
<ul class="setting">
    <li>
        <label for="uploadify">Загрузить фото</label>
        <div id="uploader">
        <input id="uploadify" type="file" name="uploadify" />
        </div>
        <div id="progress" style="display: none">
        Progress
        </div>
        <p class="Description">Ваш аватар будет отображаться на странице профиля. Выбранное изображение будет автоматически центрировано и обрезано 280 px в ширину и 200 px в высоту</p>
    </li>
    </li>
</ul>
    <div id="avatarcrop" style="display: none;">
        <table>
        <tr>
        <td>
            <ul class="setting">
                <li>
                    <label>Предосмотр</label>
                    <div style="width:32px;height:32px;overflow:hidden; margin: 0px auto">
                        <img src="" id="preview" />
                    </div>
                </li>
            </ul>
        </td>
        <td>
            <ul class="setting">
                <li>
                    <label>Обрезка</label>
                    <img src="" id="cropbox" />
                    <p class="Description">Выберите зону для обрезки</p>
                </li>
            </ul>
        </td>
        </tr>
        </table>
    </div>

<div class="button-center">
<span class="left" url="/users/{$user->login}">Отменить</span>
<span class="save disable">Сохранить</span>
</div>
<form action="/user/savephoto/" id="av">
<input type="hidden" id="image" name="image" />
<input type="hidden" size="4" id="x" name="x" />
<input type="hidden" size="4" id="y" name="y" />
<input type="hidden" size="4" id="x2" name="x2" />
<input type="hidden" size="4" id="y2" name="y2" />
<input type="hidden" size="4" id="w" name="w" />
<input type="hidden" size="4" id="h" name="h" />
</form>


{literal}
<script type="text/javascript">
function showPreview(coords)
{
    $('#x').val(coords.x);
    $('#y').val(coords.y);
    $('#x2').val(coords.x2);
    $('#y2').val(coords.y2);
    $('#w').val(coords.w);
    $('#h').val(coords.h);
    if (parseInt(coords.w) > 0)
    {
        var rx = 32 / coords.w;
        var ry = 32 / coords.h;

        jQuery('#preview').css({
            width: Math.round(rx * img_w) + 'px',
            height: Math.round(ry * img_h) + 'px',
            marginLeft: '-' + Math.round(rx * coords.x) + 'px',
            marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });

        $('span.save').removeClass('disable');
    } else {
        $('span.save').addClass('disable');
    }
}

var jCrop_API = null;
var img_w = 0;
var img_h = 0;

$(document).ready(function() {
    $("#uploadify").uploadify({
        'uploader'    : '/media/scripts/jquery.uploadify/uploadify.swf',
        'script'      : '/user/uploadphoto/',
        'cancelImg'   : '/media/scripts/jquery.uploadify/cancel.png',
        'folder'      : 'uploads',
        'fileExt'     : '*.jpg;*.jpeg;*.gif;*.png',
        'fileDesc'    : 'Зображення',
        //'hideButton'  : true,
        'width'       : 110,
        'height'      : 30,
        'buttonText'  : '...',
        'wmode'       : 'transparent',
        'auto'        : true,
        'multi'       : false,
        'onProgress'  : function(event, queueId, fileObj, data)
                        {
                            $('#progress').text(fileObj.name + ' - ' + data.percentage + '%');
                        },
        'onSelect'    : function(event, queueId, fileObj)
                        {
                            $('#avatarcrop').hide();
                            $('.uploadifyQueue').css('display', 'none');
                            $('#progress').show();
                        },
        'onComplete'  : function(event, queueID, fileObj, response, data)
                        {
                            var img = '/tmp/upload/' + response;
                            var image = new Image();
                            image.onload = function() {
                                if (jCrop_API == null) {
                                    $('#cropbox').Jcrop({
                                        setSelect: [ 0, 0, 32, 32 ],
                                        addClass: 'custom',
                                        bgColor: '#CFCFCF',
                                        bgOpacity: .5,
                                        onChange: showPreview,
                                        onSelect: showPreview,
                                        aspectRatio: 1.1,
                                        boxWidth: 500,
                                        boxHeight: 370
                                    }, function() { jCrop_API = this; });
                                }
                                else {
                                    jCrop_API.setImage(img);
                                }
                                $('#avatarcrop').show();

                                img_w = this.width;
                                img_h = this.height;

                                jCrop_API.setOptions({trueSize:[this.width, this.height]});
                                $('#progress').hide();
                            };
                            $('#preview, #cropbox').attr('src', img);
                            $('#image').val(img);
                            image.src = img;
                        }
    });

    $('span.left').styledButton({
        'action'      : function()
        {
            location.href = $(this).attr('url');
        },
        'orientation' : 'left'
    });
    $('span.save').styledButton({
        'action' : function ()
        {
            $('#av').get(0).submit();
        },
        'orientation' : 'left',
        'clear' : true
    });
});
</script>
{/literal}

{include file="elements/profile.footer.tpl"}